<script>
export default {
  data() {
    return {
      requestParam: {
        email: "",
        password: "",
        confirmPassword: "",
        captcha: "",
        captchaData: "",
      },
      loginLoading: false,
    };
  },
  mounted() {},
  methods: {
    async sendEvent() {
      if (!this.requestParam.email) {
      // 这里是告诉用户，邮箱不能为空
        this.$notify({
          title: "Please enter your user email address",
          type: "error",
        });
        return;
      }
      // 验证邮箱正则表达式
      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.requestParam.email)) {
        this.$notify({
          title: "Please enter the correct email address",
          type: "error",
        });
        return;
      }
      this.loginLoading = true;
      let requestParam = { typeCode: "email", to: this.requestParam.email };
      this.$kt.request.send({
        uri: "/user-account-web/userAccountForgotPassword/sendForgotPasswordVerificationCode",
        method: "post",
        data: requestParam,
        stateSuccess: (res) => {
          this.$notify({
            title: res.msg,
            type: "success",
          });
          this.loginLoading = false;
          console.debug("请求成功", JSON.stringify(res));
        },
        stateFail: (err) => {
          this.$notify({
            title: err.errMsg,
            type: "error",
          });
          console.debug("请求失败", JSON.stringify(err));

          this.loginLoading = false;
        },
      });
    },
    async submit() {
      if (!this.requestParam.email) {
        this.$message({
          message: "请输入邮箱账号",
          type: "error",
        });
        return;
      }
      if (!this.requestParam.captchaData) {
        this.$message({
          message: "请输入验证码",
          type: "error",
        });
        return;
      }
      if (!this.requestParam.password) {
        this.$message({
          message: "请输入密码",
          type: "error",
        });
        return;
      }
      if (!this.requestParam.confirmPassword) {
        this.$message({
          message: "请确认密码",
          type: "error",
        });
        return;
      }
      // 如果密码不确定
      if (
        this.requestParam.password &&
        this.requestParam.password !== this.requestParam.confirmPassword
      ) {
        this.$message({
          message: "两次输入的密码不一致",
          type: "error",
        });
        return;
      }
      let requestParam = {
        email: this.requestParam.email,
        verificationCode: this.requestParam.captchaData,
        password: this.requestParam.password,
      };
      this.$kt.request.send({
        uri: "/user-account-web/userAccountForgotPassword/resetPasswordByEmailAndVerificationCode",
        method: "post",
        data: requestParam,
        stateSuccess: (res) => {
          this.$notify({
            title: res.msg,
            type: "success",
          });
          this.loginLoading = false;
          this.$router.push({
            path: "/login/body",
          });
          console.debug("请求成功", JSON.stringify(res));
        },
        stateFail: (err) => {
          this.$notify({
            title: err.errMsg,
            type: "error",
          });
          console.debug("请求失败", JSON.stringify(err));

          this.loginLoading = false;
        },
      });
    },
  },
};
</script>

<template>
  <div class="back">
    <div v-for="item in 100" class="back-logo-box">
      <img class="back-logo" src="/logo.png"/>
    </div>
  </div>
  <div class="box">
    <div class="in-box">

      <div class="logo-box">
        <img class="logo" src="/logo.png" alt="logo"/>
      </div>
      <div style="height: 10px"></div>
      <div class="title">
        KANTBOOT
      </div>
      <div style="height: 10px"></div>
      <div class="form-box">
        <el-form
            ref="ruleFormRef"
            label-position="top" :rules="rules" :model="requestParam">
          <el-form-item
              prop="username"
              label="Email">
            <input
                class="input"
                :disabled="loginLoading"
                @keyup.enter.native="login()"
                placeholder="Username / Email"
                v-model="requestParam.email"></input>
          </el-form-item>
           <!-- 忘记密码 -- 验证码 -->
          <el-form-item
              prop="Captcha"
              label="Verification Code">
              <div class="captchaBox">
                 <input
                class="input"
                placeholder="Confirm Verification Code"
                v-model="requestParam.captchaData"
                ></input>
                <el-button  type="primary" @click="sendEvent()">send</el-button>
              </div>
          </el-form-item>
           <el-form-item
              prop="password"
              label="Password">
            <input
                class="input"
                placeholder="Password"
                :disabled="loginLoading"
                type="password"
                @keyup.enter.native="login()"
                v-model="requestParam.password"></input>
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item
              prop="confirmPassword"
              label="Confirm Password">
            <input
                class="input"
                placeholder="Confirm Password"
                :disabled="loginLoading"
                type="password"
                @keyup.enter.native="login()"
                v-model="requestParam.confirmPassword"></input>
          </el-form-item>
        </el-form>
        <div style="height: 10px"></div>
        <el-button
            :loading="loginLoading"
            text
            bg
            @click="submit()"
            style="width: 100%;
          font-weight: bold;
          padding: 20px;"
            type="info"
        >submit
        </el-button>
        <div style="height: 10px"></div>
        <div>
          <!-- 忘记密码 -->
          <!-- <span class="text-btn"  @click="$router.push({
                path: '/login/body'
              })">
            To Login
          </span> -->
          <!-- 注册 -->
          <span
              @click="$router.push({
                path: '/login/body'
              })"
              class="text-btn" style="float: right">
            To login
          </span>
        </div>
      </div>
      <marquee
          v-if="false"
          behavior="scroll" direction="right" scrollamount="10" scrolldelay="0" loop="-1" width="100%">
      <span
          v-for="item in list"
          :style="{
          'margin':'15px',
        }"
          class="domain">{{ item }}</span>
      </marquee>

    </div>
  </div>

</template>

<style lang="scss" scoped>
.box {
  position: fixed;
  width: 500px;
  padding: 80px;
  box-sizing: border-box;
  //background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.8);
  right: 0;
  top: 0;
  height: 100%;
}

.in-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-box {
  text-align: center;
}

.form-box {
  padding: 20px;
}
.captchaBox {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
}

@keyframes logo {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.title {
  text-align: center;
  font-weight: lighter;
  font-size: 20px;
}

.domain {
  font-size: 12px;
  text-align: center;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.1);
  color: #ffffff;
  padding: 10px;
  border-radius: 30px;
  cursor: pointer;
}

.domain:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.back {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}

.back-logo-box {
  position: relative;
  width: 150px;
  height: 150px;
  display: inline-block;
  opacity: 0.2;

  .back-logo {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.back-logo-box:hover {
  opacity: 1;
}

.input {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  background-color: rgba(255, 255, 255, 0.5);
}

.input:focus {
  border: 1px solid #409eff;
}

.text-btn {
  cursor: pointer;
  color: #333333;
  font-size: 12px;
}

.text-btn:hover {
  color: #666666;
}

.text-btn:active {
  color: #999999;
}
</style>